<template>
    <div>
        <!--展示管理员列表-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-input placeholder="请输入用户工号或用户名称" clearable v-model="text" @clear="search">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="addDialog=true">添加用户</el-button>
            </el-col>
        </el-row>

        <el-table
                :data="managerList"
                style="width: 100%">
            <el-table-column
                    label="管理员工号"
                    width="100"
                    prop="userCode">
            </el-table-column>
            <el-table-column
                    label="管理员名称"
                    width="100"
                    prop="userName">
            </el-table-column>
            <el-table-column
                    label="管理员角色"
                    width="100"
                    prop="roleList[0].roleName">
            </el-table-column>
            <el-table-column
                    label="管理员密码"
                    width="100"
                    prop="userPassword">
            </el-table-column>
            <el-table-column
                    label="管理员邮箱"
                    width="100"
                    prop="email">
            </el-table-column>
            <el-table-column
                    label="管理员电话"
                    width="100"
                    prop="cellphone">
            </el-table-column>
            <el-table-column
                    label="管理员状态"
                    width="100"
                    prop="locked">
            </el-table-column>
            <el-table-column
                    label="创建日期"
                    width="100"
                    prop="insertTime">
            </el-table-column>
            <el-table-column
                    label="更新日期"
                    width="100"
                    prop="updateTime">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="edit(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[8, 16, 32, 64]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
        </el-card>
<!--添加管理员-->
        <el-dialog title="添加管理员" :visible.sync="addDialog" width="50%" @close="addManagerFormClose">
            <el-form
                    :model="addManager"
                    :rules="addManagerFormRules"
                    ref="addManagerFormRef"
                    label-width="100px"
                    class="demo-ruleForm">
                <el-form-item label="管理员工号" prop="userCode">
                    <el-input v-model="addManager.userCode"></el-input>
                </el-form-item>
                <el-form-item label="管理员名称" prop="userName">
                    <el-input v-model="addManager.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="userPassword">
                    <el-input v-model="addManager.userPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="cellphone">
                    <el-input v-model="addManager.cellphone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addManager.email"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="managerRoleList" multiple placeholder="请选择角色">
                        <el-option :label="role.roleName" :value="role.roleId" :key="role.roleId" v-for="role in roleList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否锁定" prop="locked">
                    <el-select v-model="addManager.locked" placeholder="请选择是否锁定账户">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addManagers">确 定</el-button>
        <el-button @click="addDialog= false">取 消</el-button>
      </span>
        </el-dialog>

        <!--修改管理员-->
        <el-dialog title="修改管理员" :visible.sync="editDialog" width="50%" @close="editManagerFormClose">
            <el-form
                    :model="editManager"
                    :rules="editManagerFormRules"
                    ref="editManagerFormRef"
                    label-width="100px"
                    class="demo-ruleForm">

                <el-input v-model="editManager.userCode" type="hidden"></el-input>

                <el-form-item label="管理员名称" prop="userName">
                    <el-input v-model="editManager.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="userPassword">
                    <el-input v-model="editManager.userPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="cellphone">
                    <el-input v-model="editManager.cellphone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editManager.email"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="editManager.managerRoleList" multiple>
                        <el-option :label="role.roleName" :value="role.roleId" :key="role.roleId" v-for="role in roleList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否锁定" prop="locked">
                    <el-select v-model="editManager.locked" placeholder="请选择是否锁定账户">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editManagers">确 定</el-button>
        <el-button @click="editDialog= false">取 消</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ManagerList",
        data() {
            return {
                managerList: [],
                roleList:[],
                text:"",
                pageNum:1,
                pageSize:8,
                total:0,
                addDialog:false,
                editDialog:false,
                addManager:{
                    userCode:"",
                    userName:"",
                    userPassword:"",
                    email:"",
                    cellphone:"",
                    locked:"",
                    roleIds:[],
                },
                editManager:{
                    id:0,
                    userCode:"",
                    userName:"",
                    roleName:"",
                    userPassword:"",
                    email:"",
                    cellphone:"",
                    locked:"",
                    roleIds:[],
                    managerRoleList:[],
                },
                addManagerFormRules: {
                    userCode: [
                      { required: true, message: "請輸入工号", trigger: "blur" },
                      { min: 4, max: 6, message: "工号必须是6个字符", trigger: "blur" }
                    ],
                    userName: [
                      { required: true, message: "請輸入用戶名", trigger: "blur" },
                      { min: 3, max: 8, message: "用戶名在3-8個字符之間", trigger: "blur" }
                    ],
                    userPassword: [
                      { required: true, message: "請輸入密碼", trigger: "blur" },
                      { min: 3, max: 8, message: "密碼在3-8個字符之間", trigger: "blur" }
                    ],
                    locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]
                },
                editManagerFormRules: {
                    userCode: [
                      { required: true, message: "請輸入工号", trigger: "blur" },
                      { min: 4, max: 6, message: "工号必须是6个字符", trigger: "blur" }
                    ],
                    userName: [
                      { required: true, message: "請輸入用戶名", trigger: "blur" },
                      { min: 3, max: 8, message: "用戶名在3-8個字符之間", trigger: "blur" }
                    ],
                    userPassword: [
                      { required: true, message: "請輸入密碼", trigger: "blur" },
                      { min: 3, max: 8, message: "密碼在3-8個字符之間", trigger: "blur" }
                    ],
                    locked: [{ required: true, message: "请选择账号状态", trigger: "blur" }]
                }

            }
        },
        created(){
          this.search();
          this.axios.get(this.$baseURL.dev+"/managerment/showRole")
              .then((res)=>{
                  this.roleList=res.data.data;
              })
        },
        methods:{
            //添加管理员
            addManagerFormClose() {
                this.managerRoleList = [];
                this.addManager.roleIds = "";
            },

            addManagers(){
                this.$refs.addManagerFormRef.validate((valid) => {
                    //通过验证规则,全部通过时,返回ture
                    if (!valid) return
                    this.addManager.roleIds=this.managerRoleList.join(",")
                    this.axios.post(this.$baseURL.dev + "/managerment/addManager", this.addManager)
                        .then((res) => {
                            if (res.data.code = 200) {
                                this.addDialog = false;
                                this.search()
                                this.$message.success("添加成功")
                            } else {
                                this.$message.error("服务端异常，请联系管理员")
                            }
                        });
                })
            },
            //修改管理员
            edit(row){
                this.editDialog=true;
                this.editManager.id=row.id;
                this.editManager.userCode=row.userCode;
                this.editManager.userName=row.userName;
                this.editManager.userPassword=row.userPassword;
                this.editManager.email=row.email;
                this.editManager.cellphone=row.cellphone;
                this.editManager.locked=row.locked;
                if(row.roleList){
                    for(let j=0;j<row.roleList.length;j++){
                            this.$set(this.editManager.managerRoleList, j,row.roleList[j].roleId);
                    }
                }
                console.log(this.managerRoleList)
            },
            editManagerFormClose() {
                this.managerRoleList = [];
                this.editManager.roleIds = "";
            },

            //修改
            editManagers(){
                this.$refs.editManagerFormRef.validate((valid) => {
                    //通过验证规则,全部通过时,返回ture
                    if (!valid) return
                    this.editManager.roleIds=this.editManager.managerRoleList.join(",")
                    this.axios.post(this.$baseURL.dev + "/managerment/modifyManager", this.editManager)
                        .then((res) => {
                            if (res.data.code = 200) {
                                this.editDialog = false;
                                this.search()
                                this.$message.success("修改成功")
                            } else {
                                this.$message.error("服务端异常，请联系管理员")
                            }
                        });
                })
            },
            async handleDelete(row) {
                const res = await this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).catch((err) => err)

                //选择确定是  返回值为:confirm
                if ("confirm" === res) {
                    let url = this.$baseURL.dev+"/managerment/removeManager/"+row.id+"/"+row.roleList[0].roleId;
                    this.axios.delete(url)
                        .then(res => {
                            this.$message.success("删除成功");
                            this.search();
                        })
                        .catch(err => {
                            this.$message.error("服务端异常，请联系管理员");
                        });
                }else {
                    this.$message.info("取消删除")
                }
            },
            search(){
                this.axios.get(this.$baseURL.dev+"/managerment/showList",{
                    params:{
                        text:this.text,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        total:this.total
                    }
                })
                    .then((res)=>{
                        this.managerList=res.data.data.list;
                        console.log(this.managerList)
                        this.pageSize=res.data.data.pageSize;
                        this.pageNum=res.data.data.pageNum;
                        this.total=res.data.data.total;
                    })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.search()
            },
            handleCurrentChange(val) {
                this.pageNum=val;
                this.search()
            }
        },
    }
</script>

<style scoped>

</style>